<template>
  <div class="app-container">
    <!--*****************************************文件级***********************************-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleExportFile"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleHeighArch"
        >案卷高级查询</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="handleHeighFile"
        >文件高级查询</el-button>
      </el-col>
    </el-row>
    <!------------------ 数据表格部分 ---------------->
    <el-table :data="fileList" @selection-change="handleSelectionChangeFile" border>
      <el-table-column type="selection" width="55" align="center" />
      <!-- 可替换部分开始 -->
      <el-table-column
        :label="item.label"
        :prop="item.prop"
        align="center"
        v-for="(item, index) in tableHeaderView"
        :key="index"
        show-overflow-tooltip
      />
      <!-- 可替换部分结束 -->
      <el-table-column
        label="文件"
        align="center"
        prop="filePath"
        min-width="300px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.filePath == null || scope.row.filePath === ''">无文件</el-tag>
          <div v-if="scope.row.filePath != null && scope.row.filePath !== ''">
            <li
              :key="path"
              class="el-upload-list__item ele-upload-list__item-content"
              v-for="path in getFilePath(scope.row.filePath)"
            >
              <el-link :href="path" :underline="false" target="_blank">
                <span class="el-icon-document">
                  {{
                  getFileName(path)
                  }}
                </span>
              </el-link>
            </li>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center" prop="imagePath" width="100">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.imagePath == null || scope.row.imagePath === ''">无图片</el-tag>
          <image-preview
            v-if="scope.row.imagePath != null && scope.row.imagePath !== ''"
            :src="scope.row.imagePath"
            :width="50"
            :height="50"
          />
          <el-tag
            v-if="scope.row.imagePath != null"
            type="success"
            class="point"
            @click="printImage(scope.row.imagePath)"
          >打印</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      v-show="totalFile > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="page_size"
      :page-size.sync="pageSize"
      layout="->, total, sizes, prev, pager, next, jumper"
      :total="totalFile">
    </el-pagination>

    <!-- 文件高级查询对话框 -->
    <el-dialog
      :title="heightFile.title"
      :visible.sync="heightFile.open"
      width="560px"
      append-to-body
    >
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-select v-model="heightParam" filterable clearable placeholder="请选择字段">
            <el-option
              v-for="item in tableHeaderHeight"
              :key="item.value"
              :label="item.label"
              :value="item.prop"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <div style="padding-left: 5px; padding-top: 7px">包含</div>
        </el-col>
        <el-col :span="10">
          <el-input v-model="heightValue" placeholder="请输入查询内容" />
        </el-col>
      </el-row>
      <!-- <el-row style="margin-top: 25px">
        <el-col :span="24">
          <el-form
            :model="queryParamsFile"
            ref="queryFormFile"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <el-form-item label="归档状态">
              <el-select
                v-model="queryParamsFile.archStatus"
                filterable
                clearable
                placeholder="请选择归档状态"
              >
                <el-option
                  v-for="item in heightOptionFinish"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getHeight">搜 索</el-button>
        <el-button @click="heightFile.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import print from "print-js";
import { listPropBook, listProp } from "@/api/tool/prop";

import {
  listFileBook,
  listFileA,
  getFileA,
  addFileA,
  updateFileA,
  delFileA,
  updateApply,
  updateApprove,
  updateReject,
  multFile
} from "@/api/system/archFileA";

export default {
  // 组件传参
  props: {
    // 表对象集合
    subData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      imgType: ["png", "jpg", "jpeg"],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      // 项目根路径
      baseUrl: process.env.VUE_APP_BASE_API,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 分页器每页显示
      page_size: [5, 10, 15, 20, 25, 30, 100],
      // 当前页数
      pageNum: 1,
      // 偏移量
      pageSize: 5,
      // 高级查询值
      heightValue: null,
      // 高级查询参数
      heightParam: null,
      // 档案分类id
      typeId: this.subData.typeId,
      // 表实体
      tableList: this.subData.tableList,
      // 是否可见。0可见，1隐藏
      isView: "0",
      // 是否禁用。0正常，1禁用
      status: "0",
      // 高级查询标识。1案卷，1卷内
      schFlag: null,

      /******************文件级********************/
      // 动态字段，显示
      tableHeaderView: [],
      // 高级查询字段
      tableHeaderHeight: [],
      // 案卷高级查询字段
      tableHeaderArch: [],
      // 文件高级查询字段
      tableHeaderFile: [],
      // 选中数组
      ids: [],
      // 总条数
      totalFile: 0,
      // 文件管理表格数据
      fileList: [],
      // 弹出层标题
      titleFile: "",
      // 是否显示弹出层
      openFile: false,
      // 查询参数
      queryParamsFile: {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      },
      // 高级查询参数
      heightFile: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: ""
      },
      // 归档选项
      heightOptionFinish: [
        {
          label: "未申请",
          value: "0"
        },
        {
          label: "申请中",
          value: "1"
        },
        {
          label: "审核通过",
          value: "2"
        },
        {
          label: "审核拒绝",
          value: "3"
        }
      ],
      // 表单参数
      form: {},
    };
  },
  created() {
    // 初始化文件列表
    this.initListFile();
    // 获取表头
    this.getTbHeaderView();
  },
    // 监听树形菜单分类id值变化
  watch: {
    subData: {
      handler(newData) {
        this.typeId = newData.typeId;
        this.tableList = newData.tableList;
        this.pageNum = 1; //从第一页开始查询
        this.initListFile();
        this.getTbHeaderView();
      },
      deep: true
    }
  },
  methods: {
    // 改变size触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListFile();
    },
    // 前往触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getListFile();
    },
    /*******************************文件级*************************/
    // 文件路径处理
    getFilePath(filePaths) {
      var arrayPath = filePaths.split(",");
      for (let i in arrayPath) {
        arrayPath[i] = this.baseUrl + arrayPath[i];
      }
      return arrayPath;
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
      } else {
        return "";
      }
    },
    // 打印图片
    printImage(imgPaths) {
      var arrayPath = imgPaths.split(",");
      for (let i in arrayPath) {
        arrayPath[i] = this.baseUrl + arrayPath[i];
      }
      print({
        printable: arrayPath,
        type: "image",
        imageStyle: "width:100%;margin-bottom:20px;"
      });
    },
    // 初始文件列表
    initListFile() {
      this.queryParamsFile.schFlag = '1';
      this.queryParamsFile.pageNum = this.pageNum;
      this.queryParamsFile.pageSize = this.pageSize;
      this.queryParamsFile.typeId = this.typeId;
      this.queryParamsFile.tbNameArch = this.tableList[0].tbName;
      this.queryParamsFile.tbNameFile = this.tableList[1].tbName;
      listFileBook(this.queryParamsFile).then(response => {
        this.fileList = response.data.list;
        this.totalFile = response.data.total;
      });
      this.resetQueryFile(); // 重置参数
    },
    // 获取展示表头,
    getTbHeaderView() {
      // 显示表头
      listPropBook({
        archTableId: this.tableList[0].id,
        fileTableId: this.tableList[1].id,
       }).then(response => {
        this.tableHeaderView = response.rows;
      });
      // 案卷表头，高级查询
      listProp({
        tableId: this.tableList[0].id,
        isCustom: '1',
        isView: this.isView,
        status: this.status
      }).then(response => {
        this.tableHeaderArch = response.rows;
      });
      // 文件表头，高级查询
      listProp({
        tableId: this.tableList[1].id,
        isCustom: '2',
        isView: this.isView,
        status: this.status
      }).then(response => {
        this.tableHeaderFile = response.rows;
      });
    },
    /** 查询文件管理列表 */
    getListFile() {
      this.queryParamsFile.pageNum = this.pageNum;
      this.queryParamsFile.pageSize = this.pageSize;
      this.queryParamsFile.typeId = this.typeId;
      this.queryParamsFile.tbNameArch = this.tableList[0].tbName;
      this.queryParamsFile.tbNameFile = this.tableList[1].tbName;
      listFileBook(this.queryParamsFile).then(response => {
        this.fileList = response.data.list;
        this.totalFile = response.data.total;
      });
      this.resetQueryFile(); // 重置参数
    },
    /** 重置查询参数 */
    resetQueryFile() {
      this.queryParamsFile = {}
    },
    // 多选框选中数据
    handleSelectionChangeFile(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 案卷高级查询按钮操作 */
    handleHeighArch() {
      this.schFlag = '1';
      this.tableHeaderHeight = this.tableHeaderArch;
      this.heightFile.title = "案卷高级查询";
      this.heightFile.open = true;
    },
    /** 文件高级查询按钮操作 */
    handleHeighFile() {
      this.schFlag = '2';
      this.tableHeaderHeight = this.tableHeaderFile;
      this.heightFile.title = "文件高级查询";
      this.heightFile.open = true;
    },
    /** 高级查询 */
    getHeight() {
      this.queryParamsFile[this.heightParam] = this.heightValue;
      this.queryParamsFile.schFlag = this.schFlag;
      this.pageNum = 1; // 第一页开始查询
      this.getListFile();
      this.heightValue = null;
      this.heightParam = null;
      this.heightFile.open = false;
    },
    /** 导出按钮操作 */ 
    handleExportFile() {
      this.queryParamsFile.schFlag = '1';
      this.queryParamsFile.typeId = this.typeId;
      this.queryParamsFile.tbNameArch = this.tableList[0].tbName;
      this.queryParamsFile.tbNameFile = this.tableList[1].tbName;
      this.queryParamsFile.archTableId = this.tableList[0].id,
      this.queryParamsFile.fileTableId = this.tableList[1].id,
      this.queryParamsFile.status = this.status; //正常状态
      this.download(
        "system/RecordManage/exportbook",
        {
          ...this.queryParamsFile
        },
        `file_${new Date().getTime()}.xlsx`
      );
      this.resetQueryFile(); // 重置参数
    },
  }
};
</script>

<style>
</style>